<template>
    <show-modal :title="title" :loading="loading" width="650px" @cancel="cancel" :isSure="false">
        <a-row :gutter="16">
            <a-col class="col_item" span="12">
                <span class="label">储液罐编码：</span>
                <span class="value">{{item.jarCode}}</span>
            </a-col>
            <a-col class="col_item" span="12">
                <span class="label">储液罐名称：</span>
                <span class="value">{{item.jarName}}</span>
            </a-col>
            <a-col class="col_item" span="12">
                <span class="label">储液罐总容量：</span>
                <span class="value">{{item.jarVolume}}L</span>
            </a-col>
            <a-col class="col_item" span="12">
                <span class="label">储液罐高度：</span>
                <span class="value">{{item.jarHeight}}cm</span>
            </a-col>
            <a-col class="col_item" span="12">
                <span class="label">储液罐直径：</span>
                <span class="value">{{item.jarDiameter}}cm</span>
            </a-col>
            <a-col class="col_item" span="12">
                <span class="label">储液罐当前液位：</span>
                <span class="value">{{info.curLevel}}cm</span>
            </a-col>
            <a-col class="col_item" span="12">
                <span class="label">储液罐负责人：</span>
                <span class="value">{{item.jarLeader}}</span>
            </a-col>
            <a-col class="col_item" span="12">
                <span class="label">储液罐换算比例：</span>
                <span class="value">{{item.jarProportion}} L/CM</span>
            </a-col>
            <a-col class="col_item" span="12">
                <span class="label">储液罐位置：</span>
                <span class="value">{{item.jarLocation}}</span>
            </a-col>
            <a-col class="col_item" span="12">
                <span class="label">储液罐变化阈值：</span>
                <span class="value">{{item.jarThreshold}}</span>
            </a-col>
            <a-col class="col_item" span="12">
                <span class="label">备注：</span>
                <span class="value">{{item.comment}}</span>
            </a-col>

            <a-divider></a-divider>

            <a-col class="col_item" span="12">
                <span class="label">设备编码：</span>
                <span class="value">{{info.deviceCode}}</span>
            </a-col>
            <a-col class="col_item" span="12">
                <span class="label">设备名称：</span>
                <span class="value">{{info.deviceName}}</span>
            </a-col>
            <a-col class="col_item" span="12">
                <span class="label">通信状态：</span>
                <div class="value">
                    <p :class="['desc flex-row',info.status=='active'?'normal':'off']">
                        <span class="status"></span>
                        <span class="status_text">{{info.status=='active'?'在线':'离线'}}</span>
                    </p>
                </div>
            </a-col>
            <a-col class="col_item" span="12">
                <span class="label">设备状态：</span>
                <div class="value">
                    <p :class="['desc flex-row',info.alarmStatus==0?'normal':'warn']">
                        <span class="status"></span>
                        <span class="status_text">
                            <field-tag
                                :value="info.alarmStatus"
                                type="value"
                                showType="name"
                                :data="alarmStatus"
                            ></field-tag>
                        </span>
                    </p>
                </div>
            </a-col>
            <a-col class="col_item" span="12">
                <span class="label">设备量程：</span>
                <span class="value">{{info.deviceRange}}</span>
            </a-col>
            <a-col class="col_item" span="12">
                <span class="label">报修信息：</span>
                <span class="value">{{info.repairMsg}}</span>
            </a-col>
        </a-row>
    </show-modal>
</template>

<script>
import {getInfo} from '@/api/monitor/index'
import {alarmStatus} from '../dictionary'

export default {
    name: 'MonitorItem',
    props:{
        info:{
            type:Object,
            default:()=>{}
        }
    },
    data() {
        return {
            title: '基本信息',
            loading: false,
            alarmStatus,
            item:{}
        };
    },
    created(){
        let {jarCode,jarName} = this.info;
        this.title = `${jarName}基本信息`
        this.getDetail(jarCode)
    },
    methods: {
        //获取信息
        async getDetail(code){
            try{
                let res = await getInfo(code);
                this.item = res.data;
            }finally{

            }
        },
        cancel() {
            this.$emit('cancel');
        }
    }
};
</script>
<style lang="scss" scoped>
.col_item{
    margin-bottom: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 13px;
    color: #333;
    .label{
        width: 105px;
        text-align: right;
        flex-shrink: 0;
        color: #999;
    }
    .value{
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
.desc{
    align-items: center;
    .status{
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 100%;
    }
    .status_text{
        margin-left: 5px;
        font-size: 12px;
    }
}
.off{
    .status{
        background: #999;
    }
    .status_text,
    .status_text .dictionary{
        color: #999;
    }
}
.normal{
    .status{
        background: #52c41a;
    }
    .status_text,
    .status_text .dictionary{
        color: #52c41a;
    }
}
.warn{
    .status{
        background: #ff4d4f;
    }
    .status_text,
    .status_text .dictionary{
        color: #ff4d4f;
    }
}
</style>